<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>修改作品</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="icon" href="../../../static/images/favicon.ico" th:href="@{/images/favicon.ico}">
    <link rel="stylesheet" href="../../../static/plugin/layui/css/layui.css" th:href="@{/plugin/layui/css/layui.css}" media="all"/>
    <link rel="stylesheet" href="../../../static/back_css/create_works.css" th:href="@{/back_css/create_works.css}" media="all">
</head>
<body>
<!--<div th:if="${isSup}==0 and ${ts}==false and ${ls}==false" style="margin: 350px 500px;width: 500px"><h3 style="color: red">您没有权限修改作品！</h3></div>-->
<div id="create_works_main">
    <div class="create_works_content">
          <form class="layui-form">
              <div class="layui-form-item">
              <label class="layui-form-label">真实姓名</label>
               <div class="layui-input-block">
                <input type="text" name="USER_NAME" lay-verify="required" th:value="${work.getUSER_NAME()}"  lay-reqText="真实姓名不能为空！"   autocomplete="off" placeholder="请输入真实姓名" class="layui-input">
              </div>
          </div>
          <div class="layui-form-item">
              <label class="layui-form-label">年龄</label>
              <div class="layui-input-block">
                  <input type="number" name="AGE" lay-verify="required|number" th:value="${work.getAGE()}" lay-reqText="年龄不能为空！"   autocomplete="off" placeholder="请输入年龄" class="layui-input">
              </div>
          </div>
          <div class="layui-form-item">
              <label class="layui-form-label">手机号码</label>
              <div class="layui-input-block">
                  <input type="number" name="TELEPHONE" lay-verify="required|phone" th:value="${work.getTELEPHONE()}" lay-reqText="手机号码不能为空！"  autocomplete="off" placeholder="请输入手机号码" class="layui-input">
              </div>
          </div>
          <div class="layui-inline" style="margin-bottom: 16px">
              <label class="layui-form-label">
                  推荐单位
              </label>
              <div class="layui-input-inline" style="width: 590px">
                  <input type="text" name="DISTRICT_NAME" readonly  th:value="${work.getCOMPANY()}"  class="layui-input">
              </div>
              <span style="font-size:10px;color:red; margin-left: 25px;">(不可修改)</span>
          </div>
                <div class="layui-inline" style="margin-bottom: 16px">
                    <label class="layui-form-label">活动名称</label>
                    <div class="layui-input-inline" style="width: 590px">
                        <input type="text" name="ACTIVITY_NAME" readonly  th:value="${work.getACTIVITY_NAME()}"  class="layui-input">
                    </div>
                    <span style="font-size:10px;color:red; margin-left: 25px;">(不可修改)</span>
                </div>
                <div class="layui-form-item ">
                    <label class="layui-form-label">作品名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="WORK_NAME" lay-verify="required" th:value="${work.getWORK_NAME()}" lay-reqText="作品名称不能为空！"  autocomplete="off" placeholder="请输入作品名称" class="layui-input">
                    </div>
                </div>
                  <div class="layui-form-item ">
                      <label class="layui-form-label">作品描述</label>
                      <div class="layui-input-block">
                          <input type="text" name="WORK_ASSESSMENT" lay-verify="required" th:value="${work.getWORK_ASSESSMENT()}"   autocomplete="off" placeholder="请输入作品描述" maxlength="200" class="layui-input">
                      </div>
                  </div>
          <div class="layui-form-item layui-print-mar" >
              <label class="layui-form-label label_width">上传文件</label>
              <div class="layui-input-block">
                  <input id="au" type="radio" class="work_type" name="WORK_TYPE" lay-filter="work_type" value="1" title="上传音频" th:if="${work.getWORK_TYPE()} == 1">
                  <input id="vi" type="radio" class="work_type" name="WORK_TYPE" lay-filter="work_type" value="0" title="上传视频" th:if="${work.getWORK_TYPE()} == 0">
                  <input id="pi" type="radio" class="work_type" name="WORK_TYPE" lay-filter="work_type" value="2" title="上传图片" th:if="${work.getWORK_TYPE()} == 2">
                  <input type="hidden" name="WORK_LENTH" id="TYPE" th:value="${work.getWORK_TYPE()}">
                  <input type="hidden" name="WORK_LENTH" id="work_length">
                  <input type="hidden" name="RESOURCE_URL" id="audio_work_input">
                  <input type="hidden" name="WORK_ID" id="WORK_ID" th:value="${WORK_ID}">
              </div>
              <div class="layui-input-block audio_container "  th:if="${work.getWORK_TYPE()} == 1">
                  <span style="color: red;font-size: 1rem">上传文件请控制在200M以内！</span>
                  <span style="color: red;font-size: 0.8rem">（上传作品时请勿其他操作！）</span>
                  <button type="button" class="layui-btn layui-btn-audio" id="test6_audio" ><i class="layui-icon"></i>上传</button>
                  <div class="upload_audio">
                    <audio id="audio" th:src="${work.getRESOURCE_URL()}" controls="controls" style="width: 590px; height: 30px;outline: 0;">

                    </audio>
                  </div>
              </div>
              <div class="layui-input-block video_container" style="display: none;"  th:if="${work.getWORK_TYPE()} == 0">
                  <span style="color: red;font-size: 1rem">上传文件请控制在200M以内！</span>
                  <span style="color: red;font-size: 0.8rem">（上传作品时请勿其他操作！）</span>
                  <button type="button" class="layui-btn layui-btn-audio" id="test6_video" ><i class="layui-icon"></i>上传</button>
                  <div class="upload_audio">
                      <video id="video" th:src="${work.getRESOURCE_URL()}" controls="controls" style="width: 590px; height: 200px;outline: 0 ;">

                      </video>
                  </div>
              </div>
              <div class="layui-input-block pic_container" style="display: none;" th:if="${work.getWORK_TYPE()} == 2">
                  <span style="color: red;font-size: 1rem">图片最多可上传9张！</span>
                  <span style="color: red;font-size: 0.8rem">（上传作品时请勿其他操作！）</span>
                  <button class="layui-btn" id="update_pic">更换图片</button>
                  <button class="layui-btn add_pic"  style="display: none;" id="add_pic">添加</button>
                  <div class="layui-input-block" id="pic_list">
                      <div class="layui-input-block pic_item" th:each="urls:${work.getURL()}">
                          <img th:src="${urls.url}" style="width:100%;height: 200px">
                      </div>
                  </div>
              </div>
          </div>

          <div class="layui-btn-dom">
              <div class="layui-input-block">
                  <span style="color: red;" >您上传的作品默认为审核通过！请审核后提交！</span>
                  <button class="layui-btn layui-bg-gray layui-btn-radius" type="reset" onclick="back()" lay-filter="demos">取消</button>
                  <button type="button" class="layui-btn layui-bg-orange layui-btn-radius" lay-submit lay-filter="confirm">确定</button>
              </div>
          </div>
          <input type="hidden" id="isupdate" value="1"/>
          </form>
    </div>
</div>
<script type="text/html" id="pic_name_item">
    <div class="layui-input-block pic_item">
        <input type="file" autocomplete="off" name="WORK_IMG" class="layui-input upload_file" accept="image/*">
        <div class="upload_img layui-upload-list upload_jacket_img1">
            <span>请上传PNG、JPG、GIF格式图片</span>
        </div>
        <button class="layui-btn prizename_del">删除</button>
    </div>
</script>
<script type="text/javascript" src="../../../static/plugin/layui/layui.js" th:src="@{/plugin/layui/layui.js}"></script>
<script>
    layui.use(['form', 'layedit', 'laydate','upload'], function() {
        var form = layui.form
            , layer = layui.layer
            , layedit = layui.layedit
            , laydate = layui.laydate
            ,upload = layui.upload
            ,$ = layui.jquery;
        $.fn.serializeObject = function () {
            var o = {};
            var a = this.serializeArray();
            $.each(a, function () {
                if (o[this.name]) {
                    if (!o[this.name].push) {
                        o[this.name] = [o[this.name]];
                    }
                    o[this.name].push(this.value || '');
                } else {
                    o[this.name] = this.value || '';
                }
            });
            return o;
        }
        $(".add_pic").click(function (event) {//添加图片

            var s = $("#pic_list").children().length;
            if (s < 9) {

                $("#pic_list").append($("#pic_name_item").html());

                $("#pic_list").each(function (index, item) {
                    $(".prizename_del").on("click", function () {
                        if ($(this).parent(".pic_item")) {
                            $(this).parent(".pic_item").remove();
                        }
                        return false;
                    });
                    $(".upload_file").on("change", function (a, b) {
                        var img = window.URL.createObjectURL(this.files[0]);
                        $(this).next(".upload_jacket_img1").css("content", "url(" + img + ")");
                    });
                })
            } else {
                layer.msg("最多支持添加9张图片！")
            }
            return false;
        });
        form.on("radio(work_type)",function(data){
            // console.log(data);
            if(data.value=="1"){//音频
                $(".audio_container").css("display","block");
                $(".video_container").css("display","none");
                $(".pic_container").css("display", "none");

            }else if(data.value=="0") {//视频
                $(".video_container").css("display", "block");
                $(".audio_container").css("display", "none");
                $(".pic_container").css("display", "none");
            }else if(data.value=="2") {//图片
                $(".video_container").css("display", "none");
                $(".audio_container").css("display", "none");
                $(".pic_container").css("display", "block");
            }
        });
        $(function () {
            var type = $("#TYPE").val();
            if(type==1){
                $(".audio_container").css("display","block");
                $(".video_container").css("display","none");
                $(".pic_container").css("display", "none");
            }else if(type==0){
                $(".video_container").css("display", "block");
                $(".audio_container").css("display", "none");
                $(".pic_container").css("display", "none");
            }else if(type==2) {//图片
                $(".video_container").css("display", "none");
                $(".audio_container").css("display", "none");
                $(".pic_container").css("display", "block");
            }
            var radio = document.getElementsByName("WORK_TYPE");
            var radioLength = radio.length;
            for (var i = 0; i < radioLength; i++) {
                if(type == radio[i].value){
                    $(radio[i]).next().click();
                }

            }

        })
        var audioIndex;
        upload.render({
            elem: '#test6_audio'
            , url: '/soundUpload'
            , accept:'audio'
            , acceptMime:"audio/*"
            , exts: "mp3|m4a|wma|amr|ape|flac|aac"
            , method:'post'
            , multiple: true
            ,choose:function(obj){
                obj.preview(function(index, file, result){
                    $('#audio').attr('src', result);
                });
            }
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                audioIndex=layer.load(1);
            }
            ,done: function(res){
                if(res.code == 0){
                    return layer.msg(res.msg);
                }
                $("#TYPE").val(1);
                $("#audio_work_input").val(res.name);
                $("#work_length").val(res.time);
                //document.getElementById("video").src="";
                layer.close(audioIndex);
            }

        });
        var videoIndex;
        upload.render({
            elem: '#test6_video'
            , url: '/VideoUpload'
            , accept:'file'
            , acceptMime:'video/*'
            , method:'post'
            , multiple: true
            ,choose:function(obj){
                obj.preview(function(index, file, result){
                    $('#video').attr('src', result);
                });
            }
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                videoIndex=layer.load(1);
            }
            ,done: function(res){
                if(res.code == 0){
                    return layer.msg(res.msg);
                }
                $("#TYPE").val(0);
                $("#audio_work_input").val(res.name);
                $("#work_length").val(res.time);
                //document.getElementById("audio").src="";
                layer.close(videoIndex);
            }

        });
        form.on("submit(confirm)",function (data) {

            var isupdate = $("#isupdate").val();
            if(data.field.WORK_TYPE==2){//图片
                if(isupdate==2) {
                    var time_info = [];
                    $("#pic_list").children(".pic_item").each(function (index, item) {

                        var input = $(item).find("input")[0];
                        if (input.files && input.files.length > 0) {

                            time_info.push({
                                WORK_IMG: $(item).find("input")[0].files[0]
                            })
                        }
                    });
                    if (time_info.length==0) {
                        return layer.msg("请选择一个作品！")
                    }
                    alert("正在上传，请稍后，跳转页面之前请勿重复操作！")
                    //layer.msg("正在上传，请勿重复操作！");
                    for (var i = 0; i <= time_info.length; i++) {
                        var url = $("#audio_work_input").val();
                        if (i != time_info.length) {
                            var formData = new FormData();
                            formData.append("file1", time_info[i].WORK_IMG);
                            $.ajax({
                                url: "/picUpload",
                                type: "post",
                                data: formData,
                                contentType: false,
                                processData: false,
                                async: false,
                                success: function (data) {
                                    var backurl = data.pic;
                                    //console.log("返回路径", backurl)
                                    if (data.code == 1) {
                                        $("#audio_work_input").val(url + backurl + ",");
                                    } else {
                                        return layer.msg("上传失败！");
                                    }
                                },
                                error: function (data) {
                                    return layer.msg("上传失败！");
                                }
                            });
                        } else {
                            //console.log("总路径", url);
                        }
                    }
                    data.field.RESOURCE_URL = $("#audio_work_input").val();
                }
            }
            $.get({
                url:"/backUpdateWork",
                data:data.field,
                dataType:"json",
                async:false,
                success:function (res) {
                    if(res==0){
                        return layer.msg("上传失败！");
                    }
                    layer.msg("上传成功！");
                    window.location.href='/work';
                },
                error:function (res) {
                    return layer.msg("上传失败！");
                }
            })

        })
        $("#update_pic").click(function (event) {//添加图片
            $("#pic_list").empty();
            $("#add_pic").css("display", "block");
            $("#update_pic").css("display", "none");
            $("#isupdate").val(2);
            return false;
        })
    })
    function back() {
        window.history.back(-1);
    }
</script>
</body>
</html>